/**
子级路由
 */
<template>
  <div>
    <div class="nav" :class="showNav?'':'active_cnav'">
        <div class="nav_children">
          <div class="nav_children_left">
            <div class="nav_children_left_div" 
                v-for="(item,index) in lists" 
                :key="index"
                @click="itemClick(index)"
                >
              <router-link class="nav_children_left_div_link"  :class="{active: isActive === index}" :to="item.path">{{item.name}}</router-link>
            </div>
          </div>
          <div class="nav_children_right"><a href="https://juejin.cn/subscribe/subscribed">标签管理</a></div>
        </div>
      </div>
      <router-view></router-view>
  </div>
</template>
<script>

export default {
  name: 'PagesNav',
  setup() {
    
  },
  data() {
    return {
      // lists: ['综合', '关注', '前端','后端', 'Android', 'iOS', '人工智能', '开发工具', '代码人生', '阅读']
      lists:[
        {name: '综合', path: '/recommend'},
        {name: '关注', path: '/focus'},
        {name: '前端', path: '/frontend'},
        {name: '后端', path: '/backend'},
        {name: 'Android', path: '/android'},
        {name: 'iOS', path: '/ios'},
        {name: '人工智能', path: '/ai'},
        {name: '开发工具', path: '/developmenttools'},
        {name: '代码人生', path: '/codelife'},
        {name: '阅读', path: '/reading'},
        
      ],
      isActive: 0,
      showNav: true
    }
  },
  mounted () {
      window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    itemClick(i) {
      this.isActive = i;
    },
    handleScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
       // console.log(scrollTop)
      // let offsetTop = document.querySelector('#nav').offsetTop
      // console.log(offsetTop)
      if (scrollTop > 400) {
        this.showNav = false
      } else {
        this.showNav = true
      }
    }
  },
  destroyed () {
      window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style scoped lang="scss">

.nav {
  width: 100%;
  height: 46px;
  position: fixed;
  top: 60px;
  z-index: 2;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgb(0, 0, 0, 5%);
  &_children {
    width: 960px;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    &_left {
      display: flex;
      line-height: 46px;
      &_div {
        margin: 0 12px;
        font-size: 14px;
        &_link {
          &:hover {
            color: #1e80ff;
          }
        }
      }
    }
    &_right {
      display: flex;
      line-height: 46px;
      font-size: 14px;
      a {
        &:hover {
          color: #1e80ff;
        }
      }
      
    }
  }
}

.active_cnav {
  top: 0;
}
</style>